<template>
	<van-nav-bar title="物流详情" left-arrow @click-left="onBack" />
	<div class="loading" v-if="!isLoading">
        <van-loading type="spinner" vertical color="#1989fa">加载中...</van-loading>
    </div>
	<div v-else>
		<div title="查看物流" v-if="logistics">
			<div class="order-logistics-goods">
				<a class="image" href="javascript:;"><img :src="logistics.logo" alt="" />
					<p>{{ logistics.fee_num }}件商品</p>
				</a>
				<div class="info">
					<p><span>物流公司：</span>{{ logistics.expTextName }}</p>
					<p><span>快递单号：</span>{{ logistics.mailNo }}</p>
				</div>
			</div>
			<div class="order-logistics-list">
				<div class="item" v-for="(item, i) in logistics.data" :key="i">
					<div class="line" :class="{ active: i === 0 }"></div>
					<div class="logistics">
						<p>{{ item.context }}</p>
						<p>{{ item.time }}</p>
					</div>
				</div>
			</div>
		</div>
		<van-empty description="暂无物流信息" v-else />
	</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import apiList from '@/api'
import { useRoute } from 'vue-router'
import { showNotify } from 'vant'

const route = useRoute()
// 物流信息对象
const logistics = ref(null)
let isLoading = ref(false)

const onBack = () => history.back()

onMounted(() => {
	// console.log(route.query.OrderNum);
	open(route.query.OrderNum)//接收快递单号
})

async function open(OrderNum) {
	let res = await apiList.logisticsOrder(78684070221268)
	if (res.code == 200) {
		logistics.value = res.result
		isLoading.value = true
	} else {
		showNotify({
			type: 'warning',
			message: '查询失败',
			duration: 1500,
		})
	}
	// console.log(logistics.value);
}
</script>
<style scoped lang="scss">
.loading {
    display: flex;
    justify-content: center;
}
.xtx-dialog ::v-deep .wrapper {
	width: 680px;
}

.order-logistics-goods {
	display: flex;
	background-color: #f5f5f5;
	height: 130px;
	align-items: center;
	padding: 0 20px;
	margin-bottom: 20px;
	font-size: 14px;

	.image {
		width: 92px;
		height: 92px;
		border: 1px solid #e4e4e4;
		position: relative;

		p {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 20px;
			line-height: 20px;
			color: #fff;
			background-color: rgba(0, 0, 0, .5);
			text-align: center;
		}

		img {
			width: 100%;
			height: 100%;
		}
	}

	.info {
		flex: 1;
		padding-left: 20px;
		line-height: 30px;

		span {
			color: #999;
		}
	}
}

.order-logistics-list {
	position: relative;
	padding-top: 10px;
	font-size: 14px;

	.item {
		display: flex;

		&:last-child {
			.line {
				border-color: transparent;

				&::before {
					top: 0;
				}
			}
		}

		.line {
			width: 27px;
			border-right: 2px solid #f5f5f5;
			margin-right: 25px;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				transform: translate(7px, 0);
				border-radius: 50%;
			}

			&::before {
				width: 12px;
				height: 12px;
				background: #e4e4e4;
			}

			// 激活
			&.active {
				&::before {
					background: skyblue;
					z-index: 1;
				}

				&::after {
					content: "";
					position: absolute;
					top: 0;
					right: 0;
					transform: translate(11px, -4px);
					border-radius: 50%;
					width: 20px;
					height: 20px;
					background: #E3F9F4;
				}
			}
		}

		.logistics {
			flex: 1;
			padding-bottom: 35px;
			position: relative;
			top: -3px;

			p {
				&:first-child {
					color: #666;
				}

				&:last-child {
					color: #999;
					margin-top: 6px;
				}
			}
		}
	}
}
</style>